<template>
<!-- 头部导航栏 -->
<el-menu :default-active="activeTag.path" 
  class="el-menu-demo" 
  mode="horizontal" 
  @select="handleSelect" 
  background-color="rgb(235, 241, 246)" 
  text-color="black" 
  >
  <!-- 将获取到的导航展示出来 -->
  <el-menu-item key="home" index="home">
    <i class="el-icon-menu"></i>
    <span slot="title">首页</span>
  </el-menu-item>
  <el-submenu v-for="(items,index) in navigation" :key="index+1" :index="items.path">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>{{items.name}}</span>
      </template>
      <el-menu-item v-for="item in items.content" :key="item.path" :index="item.path">
        {{item.name}}
      </el-menu-item>
  </el-submenu>
</el-menu>
</template>

<script>
export default {
  computed: {
    navigation() {
      return this.$store.state.modules.navigation.navigation
    },
    activeNav() {
      return this.$store.state.modules.navigation.activeNav
    },
    activeTag() {
      return this.$store.state.modules.navigation.activeTag
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      let routerPush = '/home'  //跳转路径
      let active = null //活跃标签
      let nav //活跃数组
      if(key == "home") {
        nav = {
          name: "首页",
          path: "home"
        }
        // 修改标签组,导航活跃数组,活跃标签状态
        this.$store.commit('clickTags',{name: "首页",path: routerPush})
        this.$store.commit('updActiveNav',{name:"首页",path:'home',content:[]})
        this.$store.commit('updActiveTag',nav)
      }else {
        nav = this.navigation.find( value => value.path == keyPath[0])
        active = nav.content.find( value => value.path == key)
        routerPush += '/' + nav.path +'/' + active.path
        // 修改标签组,导航活跃数组,活跃标签状态
        this.$store.commit('clickTags',{name: active.name,path: routerPush})
        this.$store.commit('updActiveNav',nav)
        this.$store.commit('updActiveTag',{name:active.name,path:active.path,fullPath:routerPush})
      }
      // 跳转页面
      if (this.$route.path !== routerPush) {
        this.$router.push(routerPush)
      }
    }
  }
}
</script>
<style scoped>
</style>
